<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
	
	<head th:include="/common/shop_common :: source"></head>
	
	<body>
	<div th:include="/common/shop_common :: header"></div>
	<!--banner-->
	<div class="banner-top" >
		<div class="container">
			<h2 class="animated wow fadeInLeft" data-wow-delay=".5s">商品列表</h2>
			<h3 class="animated wow fadeInRight" data-wow-delay=".5s"><a href="index.html">Home</a><label>/</label>Products<label>/</label>Women's</h3>
			<div class="clearfix"> </div>
		</div>
	</div>
	<!--content-->
	<div class="product">
		<div class="container">
			<div class="col-md-3 product-bottom">
				<!--categories-->
				<div class="categories animated wow fadeInUp animated"
					data-wow-delay=".5s">
					<h3>分类列表</h3>
					<ul class="cate">
						<li th:each="classifys : ${classifys}">
							<i class="glyphicon glyphicon-menu-right"></i>
							<a th:href="@{/customer/products}+'?classId='+ ${classifys.id} " th:text="${classifys.className}"></a> <span></span>
						</li>
					</ul>
				</div>
				<!--//menu-->
				<!--price-->
				<div class="price animated wow fadeInUp animated"
					data-wow-delay=".5s">
					<h3><a th:onclick="'javascript:searchByPrice()'">价格搜索</a></h3>
					<div class="price-head">
						<div class="col-md-6 price-head1">
							<div class="price-top1">
								<span class="price-top">$</span> <input id="mixPrice" type="text" th:value="${mixPrice}">
							</div>
						</div>
						<div class="col-md-6 price-head2">
							<div class="price-top1">
								<span class="price-top">$</span> <input id="maxPrice" type="text" th:value="${maxPrice}">
							</div>
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
				<!--//price-->
				
				<!--//colors-->
				<div class="sellers animated wow fadeInUp" data-wow-delay=".5s">

					<h3 class="best">最受欢迎</h3>
					<div class="product-head">
						<div class="product-go">
							<div class=" fashion-grid">
								<a href="single.html">
									<img class="img-responsive" th:src="@{/webstore/images/052.jpg}" alt="">
								</a>
							</div>
							<div class=" fashion-grid1">
								<h6 class="best2">
									<a href="single.html">Lorem ipsum </a>
								</h6>
								<span class=" price-in1"> <del>$50.00</del>$40.00
								</span>
								<p>The standard chunk of Lorem Ipsum used</p>
							</div>

							<div class="clearfix"></div>
						</div>
						<div class="product-go">
							<div class=" fashion-grid">
								<a href="single.html">
									<img class="img-responsive" th:src="@{/webstore/images/052.jpg}" alt="">
								</a>
							</div>
							<div class=" fashion-grid1">
								<h6 class="best2">
									<a href="single.html">Lorem ipsum </a>
								</h6>
								<span class=" price-in1"> <del>$50.00</del>$40.00
								</span>
								<p>The standard chunk of Lorem Ipsum used</p>
							</div>
							<div class="clearfix"></div>
						</div>

					</div>
				</div>
				<!---->
			</div>
			<div class="col-md-9 animated wow fadeInRight" data-wow-delay=".5s">
				<div class="mens-toolbar">
					<div class="input-group form-group">  
			           <input id="search" type="text" style="width:300px" class="form-control"/>  
			           <button class="btn btn-primary" th:value="${search}" th:onclick="'javascript:search()'">点击搜索</button>  
					</div>
				</div>

				<div class="mid-popular">
				
					<div class="col-sm-4 item-grid item-gr  simpleCart_shelfItem" th:each="products : ${products}">
						<div class="grid-pro">
							<div class=" grid-product ">
								<figure>
									<a th:onclick="'javascript:productDetails(\''+${products.id}+'\');'">
								<span class="grid-img">
									<img th:src="${products.img}" class="img-responsive" alt=""></img>
								</span >
							</a>
								</figure>
							</div>
							<div class="women">
								<h6>
									<a th:onclick="'javascript:productDetails(\''+${products.id}+'\');'" th:text="${products.name}"></a>
								</h6>
								<p>
									<del>$</del><del th:text="${products.relPrice}"></del>
									<em class="item_price">$</em><em class="item_price" th:text="${products.salPrice}"></em>
								</p>
								<a th:onclick="'javascript:addcar(\''+${products.id}+'\');'" id="addcar" data-text="加入购物车" class="but-hover1 item_add">加入购物车</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" th:inline="javascript">
	
	//页面初始化加载
	$(function(){
		
		//加载商品信息,初始化不对商品进行搜索
		//getProducts("","","","");
	})
	
	function getProducts(classId,productName,maxPrice,minprice){
		$.ajax({  
            type: 'post',  
            dataType: 'json',  
            url: basePath + '/shopcar/addCar',  
            data: {
            	classId:classId,
            	productName:productName,
            	maxPrice:maxPrice,
            	minprice:minprice
            },  
            cache: false,  
            async: true,  
            success: function (data) {
            	layer.msg(data.msg, {icon: 6}); 
            }  
        });
	}
	
	function searchByPrice(){
		var mixPrice = $("#mixPrice").val();
		var maxPrice = $("#maxPrice").val();
		window.location.href=basePath+"/customer/products?maxPrice="+maxPrice+"&minPrice="+mixPrice
	}
	
	function search(){
		var search = $("#search").val();
		if(search == "" || search == null){
			window.location.href=basePath+"/customer/products"
		}else{
			window.location.href=basePath+"/customer/products?search="+search
		}
	}
	
	function productDetails(id){
		window.location.href=basePath+"/customer/signle?id="+id
	}
	
	function addcar(id){
		layer.confirm('确定加如购物车？', {
			  btn: ['取消','确定']
			}, function(){
			  layer.msg('期待您的下此购买', {icon: 6});
			}, function(){
				$.ajax({  
		            type: 'post',  
		            dataType: 'json',  
		            url: basePath + '/shopcar/addCar',  
		            data: {
		            	productId:id
		            },  
		            cache: false,  
		            async: true,  
		            success: function (data) {
		            	if(data.code!="200"){
		            		layer.alert('请登陆个人账户', {icon: 2},function(){
		            			window.location.href=basePath+"/user/login"
		            		});
		            	}else{
		            		layer.msg(data.msg, {icon: 6}); 
		            	}
		            }  
		        });
			});
	}
	
	</script>
	
</body>
</html>